<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script th:src="@{/echarts/echarts.min.js}"></script>
    <script th:src="@{/echarts/world.js}"></script>
    <script th:src="@{/echarts/jquery-1.11.1.min.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>

    <style>
        /* 自定义按钮样式 */
        #source-btn {
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 999;
            padding: 8px 16px;
            background-color: #393D49;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #source-btn:hover {
            background-color: #4E5261;
        }

        .ec-data-view-layer table {
            border-collapse: collapse;
            width: 100%;
            margin: 10px 0;
        }

        .ec-data-view-layer th,
        .ec-data-view-layer td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        .ec-data-view-layer th {
            background-color: #f2f2f2;
        }

        .container {
            position: relative;
            height: 5px;
            /*border: 1px solid black;*/
        }
        .top-align {
            position: absolute;
            right: 0;
            top: 0;
        }

        @media screen and (max-width: 768px) {
            #source-btn {
                top: 5px;
                left: 5px;
                padding: 6px 12px;
            }
        }
    </style>

</head>

<body class="childrenBody" style="margin-bottom: 50px">

    <div>
        <!-- 内容主体区域 -->
        <div style="padding: 15px 0px 0px 300px;">
            <!-- global.html 中的返回首页的链接 -->
            <div class="container">
                <div class="top-align">
                    <h2 style="padding: 20px 20px"><b><a th:href="@{/toChina}">返回首页</a></b></h2>
                </div>
            </div>
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="main" style="width: 1000px;height:800px;"></div>
        </div>
    </div>
    <!-- 公共菜单的 JavaScript 代码片段 -->
    <div th:insert="commonmenu :: layuicommonscript"></div>

    <a id="source-btn" title="数据来源" href="https://www.kylc.com/stats/global/yearly_overview/g_population_total.html" target="_blank">
        数据来源🔗
    </a>



    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var dataList = [];

        var nameMap = {
            '中国': 'China',
            '印度': 'India',
            '欧盟地区': 'European Union',
            '美国': 'United States',
            '印尼': 'Indonesia',
            '巴基斯坦': 'Pakistan',
            '巴西': 'Brazil',
            '尼日利亚': 'Nigeria',
            '孟加拉': 'Bangladesh',
            '俄罗斯': 'Russia',
            '墨西哥': 'Mexico',
            '日本': 'Japan',
            '埃塞俄比亚': 'Ethiopia',
            '菲律宾': 'Philippines',
            '埃及': 'Egypt',
            '越南': 'Vietnam',
            '刚果（金）': 'Democratic Republic of the Congo',
            '伊朗': 'Iran',
            '土耳其': 'Turkey',
            '德国': 'Germany',
            '泰国': 'Thailand',
            '法国': 'France',
            '英国': 'United Kingdom',
            '坦桑尼亚': 'Tanzania',
            '南非': 'South Africa',
            '意大利': 'Italy',
            '缅甸': 'Myanmar',
            '肯尼亚': 'Kenya',
            '韩国': 'South Korea',
            '哥伦比亚': 'Colombia',
            '西班牙': 'Spain',
            '乌干达': 'Uganda',
            '阿根廷': 'Argentina',
            '苏丹': 'Sudan',
            '阿尔及利亚': 'Algeria',
            '乌克兰': 'Ukraine',
            '伊拉克': 'Iraq',
            '阿富汗': 'Afghanistan',
            '加拿大': 'Canada',
            '波兰': 'Poland',
            '摩洛哥': 'Morocco',
            '沙特阿拉伯': 'Saudi Arabia',
            '乌兹别克斯坦': 'Uzbekistan',
            '安哥拉': 'Angola',
            '秘鲁': 'Peru',
            '马来西亚': 'Malaysia',
            '也门': 'Yemen',
            '加纳': 'Ghana',
            '莫桑比克': 'Mozambique',
            '尼泊尔': 'Nepal',
            '马达加斯加': 'Madagascar',
            '委内瑞拉': 'Venezuela',
            '科特迪瓦': 'Côte d\'Ivoire',
            '喀麦隆': 'Cameroon',
            '朝鲜': 'North Korea',
            '澳大利亚': 'Australia',
            '尼日尔': 'Niger',
            '斯里兰卡': 'Sri Lanka',
            '布基纳法索': 'Burkina Faso',
            '马里': 'Mali',
            '叙利亚': 'Syria',
            '马拉维': 'Malawi',
            '智利': 'Chile',
            '赞比亚': 'Zambia',
            '罗马尼亚': 'Romania',
            '哈萨克斯坦': 'Kazakhstan',
            '厄瓜多尔': 'Ecuador',
            '荷兰': 'Netherlands',
            '乍得': 'Chad',
            '危地马拉': 'Guatemala',
            '索马里': 'Somalia',
            '塞内加尔': 'Senegal',
            '柬埔寨': 'Cambodia',
            '津巴布韦': 'Zimbabwe',
            '几内亚': 'Guinea',
            '卢旺达': 'Rwanda',
            '贝宁': 'Benin',
            '布隆迪': 'Burundi',
            '突尼斯': 'Tunisia',
            '玻利维亚': 'Bolivia',
            '比利时': 'Belgium',
            '海地': 'Haiti',
            '古巴': 'Cuba',
            '约旦': 'Jordan',
            '多米尼加': 'Dominican Republic',
            '南苏丹': 'South Sudan',
            '希腊': 'Greece',
            '捷克': 'Czech Republic',
            '瑞典': 'Sweden',
            '葡萄牙': 'Portugal',
            '洪都拉斯': 'Honduras',
            '阿塞拜疆': 'Azerbaijan',
            '巴布亚新几内亚': 'Papua New Guinea',
            '塔吉克斯坦': 'Tajikistan',
            '匈牙利': 'Hungary',
            '阿联酋': 'United Arab Emirates',
            '以色列': 'Israel',
            '白俄罗斯': 'Belarus',
            '奥地利': 'Austria',
            '瑞士': 'Switzerland',
            '多哥': 'Togo',
            '塞拉利昂': 'Sierra Leone',
            '老挝': 'Laos',
            '香港': 'Hong Kong',
            '保加利亚': 'Bulgaria',
            '尼加拉瓜': 'Nicaragua',
            '塞尔维亚': 'Serbia',
            '利比亚': 'Libya',
            '巴拉圭': 'Paraguay',
            '吉尔吉斯斯坦': 'Kyrgyzstan',
            '土库曼斯坦': 'Turkmenistan',
            '萨尔瓦多': 'El Salvador',
            '丹麦': 'Denmark',
            '刚果（布）': 'Republic of the Congo',
            '黎巴嫩': 'Lebanon',
            '芬兰': 'Finland',
            '中非': 'Central African Republic',
            '新加坡': 'Singapore',
            '斯洛伐克': 'Slovakia',
            '挪威': 'Norway',
            '利比里亚': 'Liberia',
            '哥斯达黎加': 'Costa Rica',
            '新西兰': 'New Zealand',
            '爱尔兰': 'Ireland',
            '巴勒斯坦': 'Palestine',
            '毛里塔尼亚': 'Mauritania',
            '阿曼': 'Oman',
            '巴拿马': 'Panama',
            '科威特': 'Kuwait',
            '克罗地亚': 'Croatia',
            '格鲁吉亚': 'Georgia',
            '厄立特里亚': 'Eritrea',
            '乌拉圭': 'Uruguay',
            '蒙古': 'Mongolia',
            '波黑': 'Bosnia and Herzegovina',
            '波多黎各': 'Puerto Rico',
            '牙买加': 'Jamaica',
            '阿尔巴尼亚': 'Albania',
            '立陶宛': 'Lithuania',
            '亚美尼亚': 'Armenia',
            '卡塔尔': 'Qatar',
            '冈比亚': 'Gambia',
            '摩尔多瓦': 'Moldova',
            '博茨瓦纳': 'Botswana',
            '纳米比亚': 'Namibia',
            '加蓬': 'Gabon',
            '莱索托': 'Lesotho',
            '斯洛文尼亚': 'Slovenia',
            '马其顿': 'North Macedonia',
            '几内亚比绍': 'Guinea-Bissau',
            '拉脱维亚': 'Latvia',
            '赤道几内亚': 'Equatorial Guinea',
            '特立尼达和多巴哥': 'Trinidad and Tobago',
            '巴林': 'Bahrain',
            '爱沙尼亚': 'Estonia',
            '东帝汶': 'Timor-Leste',
            '毛里求斯': 'Mauritius',
            '塞浦路斯': 'Cyprus',
            '斯威士兰': 'Eswatini',
            '吉布提': 'Djibouti',
            '斐济群岛': 'Fiji',
            '科摩罗': 'Comoros',
            '圭亚那': 'Guyana',
            '不丹': 'Bhutan',
            '所罗门群岛': 'Solomon Islands',
            '澳门': 'Macau',
            '卢森堡': 'Luxembourg',
            '黑山': 'Montenegro',
            '苏里南': 'Suriname',
            '佛得角': 'Cape Verde',
            '马尔代夫': 'Maldives',
            '马耳他': 'Malta',
            '文莱': 'Brunei',
            '巴哈马': 'Bahamas',
            '伯利兹': 'Belize',
            '冰岛': 'Iceland',
            '瓦努阿图': 'Vanuatu',
            '法属波利尼西亚': 'French Polynesia',
            '巴巴多斯': 'Barbados',
            '新喀里多尼亚': 'New Caledonia',
            '圣多美和普林西比': 'São Tomé and Príncipe',
            '萨摩亚': 'Samoa',
            '圣卢西亚': 'Saint Lucia',
            '关岛': 'Guam',
            '库拉索': 'Curaçao',
            '基里巴斯': 'Kiribati',
            '格林纳达': 'Grenada',
            '密克罗尼西亚联邦': 'Federated States of Micronesia',
            '阿鲁巴': 'Aruba',
            '汤加': 'Tonga',
            '圣文森特和格林纳丁斯': 'Saint Vincent and the Grenadines',
            '塞舌尔': 'Seychelles',
            '安提瓜和巴布达': 'Antigua and Barbuda',
            '马恩岛': 'Isle of Man',
            '安道尔': 'Andorra',
            '多米尼克': 'Dominica',
            '开曼群岛': 'Cayman Islands',
            '百慕大': 'Bermuda',
            '马绍尔群岛': 'Marshall Islands',
            '格陵兰': 'Greenland',
            '法罗群岛': 'Faroe Islands',
            '北马里亚纳群岛': 'Northern Mariana Islands',
            '圣基茨和尼维斯': 'Saint Kitts and Nevis',
            '特克斯和凯科斯群岛': 'Turks and Caicos Islands',
            '美属萨摩亚': 'American Samoa',
            '荷属圣马丁': 'Sint Maarten',
            '列支敦士登': 'Liechtenstein',
            '摩纳哥': 'Monaco',
            '圣马力诺': 'San Marino',
            '直布罗陀': 'Gibraltar',
            '法属圣马丁': 'French Saint Martin',
            '英属维尔京群岛': 'British Virgin Islands',
            '帕劳': 'Palau',
            '瑙鲁': 'Nauru',
            '图瓦卢': 'Tuvalu'
        };

        // 将中文转换为英文
        function cnToEn(name) {
            return nameMap[name] || name;
        }

        // 将英文转换为中文
        function enToCn(name) {
            return Object.keys(nameMap).find(key => nameMap[key] === name) || name;
        }

        // 多语言切换时更新按钮文本
        function updateLanguage(lang) {
            var btn = document.getElementById('source-btn');
            btn.textContent = lang === 'en' ? 'Data Source🔗' : '数据来源🔗';
        }

        option = {
            title: {
                text: '2021年全球人口数据地图',
                subtext: '人口分布（截止至北京时间2021年）',
                left: 'center',
                top: 'top'
            },
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    var value = params.value + '';
                    return params.seriesName + '<br/>' + enToCn(params.name) + ' : ' + value+'人';
                }
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: {
                        readOnly: false,
                        title: '数据视图',
                        lang: ['数据视图', '关闭', '刷新'],
                        optionToContent: function(opt) {
                            var data = opt.series[0].data;
                            var table = '<table border="1" cellspacing="0" cellpadding="5">';
                            table += '<tr><th>排名</th><th>国家/地区</th><th>人口</th></tr>';

                            data.sort((a, b) => b.value - a.value).forEach((item, index) => {
                                table += '<tr>';
                                table += `<td>${index + 1}</td>`;
                                table += `<td>${enToCn(item.name)}</td>`;
                                table += `<td>${item.value.toLocaleString()}</td>`;
                                table += '</tr>';
                            });

                            return table;
                        }
                    },
                    restore: {
                        title: '重置'
                    },
                    saveAsImage: {
                        title: '保存为图片'
                    }
                }
            },
            visualMap: {
                min: 0,
                max: 1500000000,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                color: ['orangered', 'yellow', 'lightskyblue']
            },
        };

        // 在图表初始化后添加按钮
        myChart.on('finished', function() {
            var btn = document.createElement('a');
            btn.id = 'source-btn';
            btn.href = 'https://www.kylc.com/stats/global/yearly_overview/g_population_total.html';
            btn.target = '_blank';
            btn.textContent = '数据来源🔗';
            document.body.appendChild(btn);
        });

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        // 使用 jQuery 的 $.ajax 方法发起一个异步的 HTTP 请求
        $.ajax({
            // 设置请求的目标 URL，这里会向服务器的 /query 接口发送请求
            url: "/queryGlobal",
            // 指定期望从服务器返回的数据类型为 JSON，jQuery 会自动将响应内容解析为 JavaScript 对象
            dataType: "json",
            // 当请求成功（服务器返回状态码为 200）时执行的回调函数
            // 当请求成功（服务器返回状态码为 200）时执行的回调函数
            success: function (data) {
                // 把国家名从中文转成英文
                dataList = data.map(item => ({
                    name: cnToEn(item.name),
                    value: item.value
                }));
                // 使用 echarts 图表对象 myChart 的 setOption 方法更新图表的配置选项
                myChart.setOption({
                    // 设置图表的系列配置
                    series: [{
                        name: '2021年全球入口数据地图',
                        type: 'map',
                        mapType: 'world',
                        nameMap: nameMap,
                        roam: true,
                        itemStyle: {
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        data: dataList
                    }]
                });
                // 在控制台输出请求成功的提示信息，并打印更新后的 dataList 数组
                console.log("请求成功，数据已更新：", data);
            },
            // 当请求失败时执行的回调函数
            error: function (jqXHR, textStatus, errorThrown) {
                // 在控制台输出请求失败的错误信息，包括请求状态和错误描述
                console.error("请求失败：", textStatus, errorThrown);
            }
        });
    </script>
</body>
</html>